<template>
	<view class="mine">
		<!-- 我的信息 -->
		<view class="myInfo">
			<view class="item w100p">
				<view class="left u-flex-1" @tap="goMyInfo">
					<view class="avatar">
						<u-avatar :src="userInfo.avatar" mode="circle" size="112"></u-avatar>
						<view class="edit">
							<image src="/static/icons/revise.png" alt="" />
						</view>
					</view>
					<view class="info u-flex-1">
						<view class="top">
							<view class="name">{{ userInfo.name || '您还没有登录' }}</view>
						</view>

						<view class="phone">
							<view>{{ userInfo.mobile }}</view>

						</view>
						<view class="merchant mt10" v-if="is_house === 1 && userInfo.store_name">
							<image src="/static/icons/merchant.png" alt="" />
							<view class="title u-line-1" style="font-size: 24rpx;">{{ userInfo.store_name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 设置 -->
		<!-- <view class="myList">
			<view class="setUp">{{ $t('设置') }}</view>
			<view class="item" @click="goAboutUs(item)" v-for="(item, index) in myList" :key="index">

				<view class="left">
					<image :src="item.icon" alt="" />
					<view class="title">{{ $t(item.name) }}</view>
				</view>
				<span v-if="item.name === '清除缓存'" @click="clearFile">{{ fileSizeString }}</span>
				<u-icon v-if="item.url" name="arrow-right" color="#999999"></u-icon>
			</view>
		</view> -->
		<view class="myList">
			<!-- <view class="setUp">{{ $t('设置') }}</view> -->
			<!-- 	<view class="item" v-if="is_service === 1" @click="$u.route('/pages/mine/wallets/index')">
				<view class="left">
					<image src="/static/icons/my_wallets.png" alt="" />
					<view class="title">{{ $t('我的钱包') }}</view>
				</view>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view> -->
			<!-- <view class="item" v-if="is_service === 1" @click="$u.route('/pages/mine/orderList/index')">
				<view class="left">
					<image src="/static/icons/my_order.png" alt="" />
					<view class="title">{{ $t('接单列表') }}</view>
				</view>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view> -->
			<view class="item" v-if="is_service === 1" @click="$u.route('/pages/mine/changeClassify')">
				<view class="left">
					<image src="/static/icons/my_order.png" alt="" />
					<view class="title">{{ $t('修改家政分类') }}</view>
				</view>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
			
			<!-- <view class="item" v-if="is_service === 1">
				<view class="left">
					<image src="/static/icons/my_order.png" alt="" />
					<view class="title">{{ $t('修改家政区域') }}</view>
				</view>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view> -->
			<view class="item" v-if="is_house === 1" @click="$u.route('/pages/mine/myRelease/index')">
				<view class="left">
					<image src="/static/icons/my_release.png" alt="" />
					<view class="title">{{ $t('我的发布') }}</view>
				</view>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
			<!-- <view class="item" @click="$u.route('/pages/mine/video/list')">
				<view class="left">
					<image src="/static/icons/my_release.png" alt="" />
					<view class="title">{{ $t('我的视频') }}</view>
				</view>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view> -->
			<view class="item" @click="$u.route('/pages/mine/forum/index')">
				<view class="left">
					<image src="/static/icons/home_5.png" />
					<view class="title">{{ $t('发帖') }}</view>
				</view>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
			<view class="item" @click="$u.route('/pages/mine/house')">
				<view class="left">
					<image src="/static/icons/my_order.png" />
					<view class="title">{{ $t('本区域房源') }}</view>
				</view>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
			<view class="item">
				<view class="left">
					<image src="/static/icons/home_1.png" alt="" />
					<view class="title">{{ $t('清除缓存') }}</view>
				</view>
				<span @click="clearFile">{{ fileSizeString }}</span>
			</view>
			<view class="item" @click="updated">
				<view class="left">
					<image src="/static/icons/home_2.png" alt="" />
					<view class="title">{{ $t('检查新版本') }}</view>
				</view>
			</view>
			<view class="item" @click="$u.route('/pages/login/protocol', { id: 3 })">
				<view class="left">
					<image src="/static/icons/home_3.png" alt="" />
					<view class="title">{{ $t('关于我们') }}</view>
				</view>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
			<view class="item" @click="goPage('用户协议', '1')">
				<view class="left">
					<image src="/static/icons/my_order.png" alt="" />
					<view class="title">{{$t('用户协议') }}</view>
				</view>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
			<view class="item" @click="goPage('隐私协议', '5')">
				<view class="left">
					<image src="/static/icons/my_order.png" alt="" />
					<view class="title">{{$t('隐私协议') }}</view>
				</view>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
			<!-- <view class="item" @click="createPoster">
				<view class="left">
					<image src="/static/icons/home_4.png" alt="" />
					<view class="title">下载APP</view>
				</view>
			</view> -->
		</view>
		<view class="quit">
			<u-button type="primary" @click="quit">{{ $t('退出登录') }}</u-button>
		</view>
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>

		<u-popup v-model="shareShow" mode="center" width="640" closeable close-icon-color="#ffffff">
			<view class="share-popup">
				<image class="image" :src="shareBanner" mode="widthFix"></image>
				<view class="btn-box">
					<button class="btn" @click="copyHandle">复制下载链接</button>
					<button class="btn" @click="downloadImage">下载海报</button>
				</view>
			</view>
		</u-popup>

		<canvas canvas-id="shareImageCanvas" id="shareImageCanvas" style="width: 750px; height: 1500px;" />
	</view>
</template>

<script>
	import {
		quitLogin
	} from '@/common/utils';
	import update from '@/common/utils/update.js';
	export default {
		name: 'mine',
		data() {
			return {
				show: false,
				fileSizeString: '',
				userInfo: {},
				// myList: [
				// 	{
				// 		name: '我的钱包',
				// 		url: '/pages/mine/wallets/index',
				// 		icon: '/static/icons/home_3.png',
				//
				// 	},
				// 	{
				// 		name: '接单列表',
				// 		url: '/pages/mine/orderList/index',
				// 		icon: '/static/icons/home_3.png',

				// 	},
				// 	{
				// 		name: '我的发布',
				// 		icon: '/static/icons/my_release.png',
				// 		url: '/pages/mine/myRelease/index',
				//
				// 	},
				// 	{
				// 		name: '清除缓存',
				// 		icon: '/static/icons/home_1.png',

				// 	},
				// 	{
				// 		name: '检查新版本',
				// 		icon: '/static/icons/home_2.png',

				// 	},
				// 	{
				// 		name: '关于我们',
				// 		url: '/pages/login/protocol?id=' + '3',
				// 		icon: '/static/icons/home_3.png',

				// 	},

				// ],
				list: [{
						value: '1',
						label: '家政服务'
					},
					{
						value: '2',
						label: '房产'
					}
				],

				shareShow: false,
				shareBanner: '',

				

				download_salesman_app: '',
				salesman_download_qr: '',
				salesman_download_url: ''
			};
		},
		onLoad() {
			this.getStorageSize();
			// this.websocketDispose()
			
		},
		onShow() {
			this.getUserInfo();
		
		},
		onHide () {
			// console.log('mine onHide');
			// this.offLocationChange()
		},
		methods: {
			goPage(name, id) {
				this.$u.route('/pages/login/protocol', {
					name,
					id
				});
			},
			// websocketDispose() {
			// 	this.$store.dispatch('websocketInit')
			// },
			bind_client_id(client_id) {
				uni.$u.api.bind_uid({
					client_id
				}).then(res => {
					console.log('res: ', res);
				})
			},
			confirm(e) {
				console.log('e: ', e);
				if (e[0].value == '1') {
					uni.setTabBarItem({
						// 修改底部导航
						index: 1,
						text: '接单大厅'
					});
				} else {
					uni.setTabBarItem({
						// 修改底部导航
						index: 1,
						text: '客户'
					});
				}
			},
			getUserInfo() {
				this.$u.api.material().then(res => {
					console.log(res.data);
					this.userInfo = res.data.data;
					this.download_salesman_app = res.data.download_salesman_app;
					this.salesman_download_qr = res.data.salesman_download_qr;
					this.salesman_download_url = res.data.salesman_download_url;
					uni.setStorageSync('is_house', res.data.data?.is_house);
					uni.setStorageSync('is_service', res.data.data?.is_service);
					this.getTabbar(res.data.data?.is_house, res.data.data?.is_service);
				});
			},
			quit() {
				uni.removeStorage({
					key: 'token',
				})
				this.$store.dispatch('websocketClose')
				uni.reLaunch({
					url: '/pages/login/index'
				})
			},
			// 我的信息
			goAboutUs(item) {
				if (item.name === '检查新版本') {
					console.log(1);
					update();
				} else {
					this.$u.route(item.url);
				}
			},
			updated() {
				update();
			},
			goMyInfo() {
				this.$u.route('/pages/mine/myInfo/index');
			},
			// 计算缓存
			getStorageSize() {
				// #ifdef APP-PLUS
				let that = this;
				plus.cache.calculate(function(size) {
					let sizeCache = parseInt(size);
					if (sizeCache == 0) {
						that.fileSizeString = '0B';
					} else if (sizeCache < 1024) {
						that.fileSizeString = sizeCache + 'B';
					} else if (sizeCache < 1048576) {
						that.fileSizeString = (sizeCache / 1024).toFixed(2) + 'K';
					} else if (sizeCache < 1073741824) {
						that.fileSizeString = (sizeCache / 1048576).toFixed(2) + 'M';
					} else {
						that.fileSizeString = (sizeCache / 1073741824).toFixed(2) + 'G';
					}
				});
				// #endif
			},
			// 清除缓存
			clearFile() {
				// #ifdef APP-PLUS
				const that = this;
				plus.cache.clear(res => {
					uni.showToast({
						title: '清除中',
						icon: 'loading',
						duration: 1000,
						success() {
							setTimeout(() => {
								that.fileSizeString = '0B';
							}, 1000);
						}
					});
				});
				// #endif
			},
			getTabbar(is_house, is_service) {
				if (is_service === 1 && is_house === 1) {
					uni.setTabBarItem({
						// 修改底部导航
						index: 0,
						visible: true
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 1,
						visible: true
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 2,
						visible: true
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 3,
						visible: true
					});
				}

				if (is_service === 1 && is_house === 0) {
					uni.setTabBarItem({
						// 修改底部导航
						index: 3,
						visible: true
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 2,
						visible: true
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 0,
						visible: false
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 1,
						visible: false
					});
				}

				if (is_service === 0 && is_house === 1) {
					uni.setTabBarItem({
						// 修改底部导航
						index: 3,
						visible: false
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 2,
						visible: true
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 0,
						visible: true
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 1,
						visible: true
					});
				}
			},
			async createPoster() {
				uni.showLoading({
					title: '图片生成中...'
				})

				if (this.shareBanner) {
					uni.hideLoading()
					this.shareShow = true
				} else {
					const ctx = uni.createCanvasContext('shareImageCanvas')
					// 背景
					console.log(this.download_salesman_app);
					ctx.drawImage(this.download_salesman_app, 0, 0, 750, 1500)
					/* 二维码 */
					let QRode = await this.getImageInfo(this.salesman_download_qr);
					ctx.drawImage(QRode, 256, 886, 240, 240)

					ctx.draw(false, () => {
						uni.canvasToTempFilePath({
							canvasId: 'shareImageCanvas',
							x: 0,
							y: 0,
							width: 750,
							height: 1500,
							destWidth: 750,
							destHeight: 1500,
							success: (res) => {
								this.shareBanner = res.tempFilePath
								uni.hideLoading()
								this.shareShow = true
							}
						})
					})
				}
			},
			getImageInfo(url) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success: function(image) {
							resolve(image.path)
						}
					});
				})
			},
			copyHandle() {
				var _this = this;
				uni.setClipboardData({
					data: _this.salesman_download_url,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			},
			downloadImage() {
				uni.saveImageToPhotosAlbum({
					filePath: this.shareBanner,
					success: (res) => {
						uni.showToast({
							title: '保存成功'
						});
					}
				})
			},
		},
		computed: {
			is_house() {
				return uni.getStorageSync('is_house');
			},
			is_service() {
				return uni.getStorageSync('is_service');
			}
		},
		onPullDownRefresh() {
			uni.reLaunch({
				url: '/pages/mine/index'
			});
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	};
</script>

<style lang="scss" scoped>
	.mine {
		padding: 20rpx;
		background: url('http://app.maifangqi.com/imgs/ywd/mine_bac.png') no-repeat;
		background-size: 100% auto;
	}

	.myInfo {
		margin: 0rpx 0 26rpx;
		color: #fff;

		.item {
			@include flex($justify: space-between, $aligin: center);

			.left {
				justify-content: flex-start;
				@include flex($aligin: center);
				margin-left: 30rpx;

				.avatar {
					position: relative;

					.edit {
						position: absolute;
						text-align: center;
						right: 200rpx;
						bottom: 0;
						right: 0;

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}

				.info {
					margin-left: 30rpx;

					.top {
						margin-bottom: 20rpx;
						@include flex($aligin: center);
					}

					.name {
						font-weight: bold;
						font-size: 30rpx;
						margin-right: 15rpx;
					}

					.merchant {
						@include flex($aligin: center);
						padding: 8rpx 16rpx;
						height: 40rpx;
						background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 100%);
						border-radius: 26rpx 26rpx 26rpx 26rpx;

						image {
							margin-right: 20rpx;
							width: 34rpx;
							height: 34rpx;
						}
					}

					.phone {
						@include flex($aligin: center);
					}
				}
			}
		}
	}

	.myList {
		margin-top: 100rpx;
		color: #232323;

		.setUp {
			font-size: 30rpx;
			font-weight: 600;
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}

		.item {
			@include flex($justify: space-between, $aligin: center);
			box-shadow: $shadow;
			padding: 35rpx;
			margin: 20rpx 0;
			border-radius: 20rpx;

			.left {
				@include flex($aligin: center);

				.title {
					font-size: 28rpx;
					margin-left: 30rpx;
					color: #232323;
				}
			}
		}
	}

	.quit {
		margin: 50rpx;
	}

	.share-popup {
		position: relative;

		.image {
			width: 100%;
			vertical-align: middle;
		}

		.btn-box {
			position: absolute;
			bottom: 80rpx;
			left: 0;
			right: 0;
			z-index: 4;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 36rpx;

			.btn {
				margin: 0;
				width: 270rpx;
				height: 70rpx;
				border-radius: 14rpx;
				color: #fff;
				font-size: 28rpx;
				background-color: #162975;
			}
		}
	}

	#shareImageCanvas {
		position: fixed;
		left: 10000px;
	}
</style>